import { Button, Tabs, TabsProps, Tree } from "antd";
import { useComponentsStore, Component } from "@/stores/edit-pages-store";
import { getMainOutlineData } from "./outlineData";
import { initModalSchema } from "@/pages/lowCodeEditorPlus/materialItems/construction/Modal/setter";
import { DeleteOutlined, ExclamationCircleFilled } from "@ant-design/icons";
import "./index.scss";
import { GFS } from "@/hooks/useAssignGlobalProps";
export function Outline() {
  const {
    setCurComponentId,
    schema,
    setPopEditing,
    setCurPopTarget,
    curPopTarget,
    addComponent,
    deleteComponent,
    setCurComponentUnitType
  } = useComponentsStore();

  const {treeData} = getMainOutlineData();
  
  function clickPopItem(item: Component) {
    const { id } = item;
    setPopEditing(true);
    setCurComponentId(id);
    setCurPopTarget(id);
  }
  function addNewModal() {
    addComponent(initModalSchema(schema.id), schema.id, "definitions");
  }
  function handleDeleteModal(modal: Component) {
    const { id, alias } = modal;
    GFS.modal.confirm({
      title: "警告",
      icon: <ExclamationCircleFilled />,
      content: `确认删除${alias}?`,
      onOk() {
        if (curPopTarget?.id === id) {
          setCurComponentId(null);
          setCurPopTarget(null);
        }
        deleteComponent(id, "definitions");
      },
    });
  }
  const PopList = () => (
    <ul className="mt-2">
      {(schema.definitions || []).map(item => {
        return (
          <li key={item.id} className={`modalLiItem ${item.id === curPopTarget?.id ? "active" : ""}`}>
            <span className="title" onClick={() => clickPopItem(item)}>
              {item.alias}
            </span>
            <div>
              <DeleteOutlined onClick={() => handleDeleteModal(item)} />
            </div>
          </li>
        );
      })}
    </ul>
  );

  const items: TabsProps["items"] = [
    {
      key: "componentOutline",
      label: "组件大纲",
      children: (
        <Tree
          treeData={treeData}
          showLine
          defaultExpandAll
          onSelect={([selectedKey], info) => {
            const {editRegion, id} = info.node
            setCurComponentUnitType(editRegion)
            setCurComponentId(id as string);
          }}
        />
      ),
    },
    {
      key: "popList",
      label: "弹窗列表",
      children: (
        <div className="px-[10px] overflow-y-auto">
          <Button color="primary" variant="outlined" block onClick={addNewModal}>
            新增弹窗
          </Button>
          <PopList />
        </div>
      ),
    },
  ];
  const onChange = (key: string) => {
    console.log(key);
  };
  return (
    <Tabs
      defaultActiveKey="1"
      items={items}
      onChange={onChange}
      tabBarStyle={{ padding: "0 12px" }}
      className="scrollHFullAntTab"
    />
  );
}
